<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>消息推送</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <div class="el-card-button">
                <el-button type="primary" size="small" @click="addServer">添加客服消息</el-button>
            </div>
            <p class="hint">温馨提示:仅 48 小时内和公众号有过交互 (点击菜单, 回复等) 的粉丝才能收到</p>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="任务名称">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题">
                </el-table-column>
                <el-table-column
                        prop="stime"
                        label="发送时间">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="发送状态">
                    <template slot-scope="scope">
                        <!--                        <el-switch v-model="scope.row.value"></el-switch>-->
                        <span v-if="scope.row.status==1">未发送</span>
                        <span v-if="scope.row.status==0">已发送</span>
                        <span></span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作" width="260">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="small" @click="send(scope.row.id)" v-if="scope.row.status==1">立即发送</el-button>
                        <el-button type="warning" plain size="small" @click="edit(scope.row.id)">修改</el-button>
                        <el-button type="danger" plain size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    @size-change="changeSize"
                    @current-change="changeCurrent"
                    :current-page="params.pagenum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="params.pagesize"
                    :layout="this.$store.state.paginationLayout"
                    :total="params.totals">
            </el-pagination>
        </el-card>

    </div>
</template>

<script>
  import {formatDate} from '../../utils/common'

  export default {
    name: "Message_Mass",
    data() {
      return {
        form: {
          name: "",
        },
        params: {
          pagenum: 1,
          pagesize: 10,
          totals: 0
        },
        tableData: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let data = {
          page: this.params.pagenum,
          page_size: this.params.pagesize,
        };
        this.$axios.get("admin/custom", data).then((res) => {
          this.params.totals = res.data.count;
          this.tableData = res.data.list;
          this.tableData.map((num) => {
            num.stime = formatDate(num.stime);
          })
        });
      },
      // 每页显示多少条
      changeSize(val) {
        this.params.pagesize = val;
        this.getList();
      },
      // 当前显示的页数
      changeCurrent(val) {
        this.params.pagenum = val;
        this.getList();
      },
      addServer() {
        this.$router.push({
          path: '/Message_set'
        })
      },
      edit(id) {
        this.$router.push({
          path: '/message_set',
          query: {
            id: id
          }
        })
      },
      remove(id) {
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.del('admin/custom/' + id).then((res) => {
            this.$message.success('删除成功!');
            this.getList();
          });
        }).catch(() => {

        });
      },
      send(id){
        this.$confirm('确定要进行操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('admin/custom/send_now',{id:id}).then((res) => {
            this.$message.success('发送成功!');
            this.getList();
          });
        }).catch(() => {

        });
      }
    }
  }
</script>

<style scoped>
    .agent_input {
        display: flex;
        align-items: center;
    }

    .agent_center {
        margin: 0 20px;
    }

    .hint {
        color: #409EFF;
        line-height: 50px;
    }

</style>